<template>
  <div class="bg1" :style="goodstyle">
    <div class="swiper decorate" :style="'height:' + height + 'px;' + itemstyle">
      <el-carousel indicator-position="none" @change="changesilde">
        <el-carousel-item v-for="(item, i) in data.imglist" :key="i">
          <vimage :src="item.url" v-if="item.url"></vimage>
          <img src="@/assets/images/banner.png" v-else />
        </el-carousel-item>
      </el-carousel>
      <div>
        <ul v-if="data.type == 1" class="dots rectangle" :style="'justify-content:' + data.position">
          <li v-for="(item, i) in data.imglist" :key="i" :class="activeIndex == i ? 'dot active' : 'dot'" :style="'background:' + data.bg"></li>
        </ul>
        <ul v-if="data.type == 2" class="dots round" :style="'justify-content:' + data.position">
          <li v-for="(item, i) in data.imglist" :key="i" :class="activeIndex == i ? 'dot active' : 'dot'" :style="'background:' + data.bg"></li>
        </ul>
        <p v-if="data.type == 3" :class="'number ' + data.position">{{ activeIndex + 1 }}/{{ data.imglist.length }}</p>
      </div>
    </div>
  </div>
</template>
<script>
import {getImageInfo} from '@/utils/index';
import {mapState} from 'vuex';
import {mapGetters} from 'vuex';
export default {
  props: {
    data: {
      type: Object,
      default: {}
    }
  },
  watch: {
    'data.imglist': {
      handler(newlist, oldlist) {
        let data = newlist[0];
        if (data.url) {
          let url=this.picurl + '/' +data.url
          const _this = this;
          getImageInfo(url, function(width, height) {
            let myheight = ((375 - _this.data.p_lr) / width) * height;
            _this.height = myheight + '';
          });
        }
      },
      deep: true,
      immediate: true
    },
    'data.p_lr': {
      handler() {
        console.log(111)
        let data = this.data.imglist[0];
        if (data.url) {
           let url=this.picurl + '/' +data.url
          const _this = this;
          getImageInfo(url, function(width, height) {
            let myheight = ((375 - _this.data.p_lr) / width) * height;
            _this.height = myheight + '';
          });
        }
      }
    }
  },

  computed: {
    itemstyle() {
      return 'border-radius:' + this.data.r_t / 2 + 'px ' + this.data.r_t / 2 + 'px ' + this.data.r_b / 2 + 'px ' + this.data.r_b / 2 + 'px ';
    },
    goodstyle() {
      var bg = '';
      if (this.data.bg_type == 1) {
        bg = 'background:' + this.data.bg_color;
      } else if (this.data.bg_type == 2) {
        if (this.picurl) {
          let bg_img = this.picurl + '/' + this.data.bg_img;
          bg = 'background-image:url(' + bg_img + ');background-repeat: no-repeat;';
        }
      }

      return 'padding: ' + this.data.p_t / 2 + 'px ' + this.data.p_lr / 2 + 'px ' + this.data.p_b / 2 + 'px;' + bg;
    },
    ...mapGetters(['picurl'])
  },
  data() {
    const _this = this;
    return {
      list: [{}, {}, {}],
      activeIndex: 0,
      height: '147',
      first_img: this.data.imglist[0]
    };
  },
  methods: {
    changesilde(a, b) {
      this.activeIndex = a;
    }
  },
  mounted() {
    // getImageInfo()
  }
};
</script>
<style>
.el-carousel {
  height: 100% !important;
}

.el-carousel__container {
  height: 100% !important;
}
</style>
<style lang="scss" scoped>
.bg1 {
  background-size: contain;
}
.swiper {
  overflow: hidden;

  img {
    width: 100%;
    display: block;
    height: 100%;
  }

  .dots {
    position: absolute;
    display: flex;
    bottom: 9.77199px;
    box-sizing: border-box;
    padding: 0 14.65798px;
    left: 0;
    right: 0;
    justify-content: center;
    z-index: 1000;

    .dot {
      width: 6px;
      height: 6px;
      background: #fff;
      margin: 0 3px;
      opacity: 0.54;

      &.active {
        opacity: 1;
      }
    }

    &.round {
      .dot {
        border-radius: 50%;
      }
    }

    &.rectangle {
      .dot {
        width: 8px;
        height: 4px;
        border-radius: 4px;
        margin: 0 3px;
      }
    }
  }

  .number {
    position: absolute;
    display: flex;
    bottom: 9.77199px;
    box-sizing: border-box;
    justify-content: center;
    color: #fff;
    background: rgba(0, 0, 0, 0.54);
    border-radius: 22px;
    flex-direction: column;
    flex-direction: column;
    text-align: center;
    width: fit-content;
    min-width: 60rpx;
    font-size: 9px;
    line-height: 9px;
    padding: 3px 5px;
    right: 12px;
    z-index: 1000;

    &.flex-start {
      left: 12px;
    }

    &.flex-end {
      right: 12px;
    }
  }
}
</style>
